<template>
  <div id="cryptos">
    <div class="recharge box-border">
      <assets-head :title="$t('充值通道')" v-if="!isForeign" :back-func="backFunc">
        <img src="../../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
          @click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')" />
      </assets-head>
      <assets-head v-else :title="$t('充值通道')" >
        <img src="../../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
          @click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')" />
      </assets-head>
      <div class="pl-36 pr-36">
        <div class="recharge-title font-35 textColor">{{ $t('请选择充值币种') }}</div>
        <div class="recharge-list flex justify-between">
          <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
            @click="selectSymbol('usdt')">
            <img src="../../../assets/image/symbol/usdt.png" class="w-92 h-92" />
            <div class="text-grey font-26 mt-32">{{ $t('USDT充值') }}</div>
          </div>
          <div class="item-view  flex flex-col items-center justify-center text-center w-189 h-220 box-border"
            @click="selectSymbol('btc')">
            <img src="../../../assets/image/symbol/btc.png" class="w-92 h-92" />
            <div class="text-grey font-26 mt-32">{{ $t('BTC充值') }}</div>
          </div>
          <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
            @click="selectSymbol('eth')">
            <img src="../../../assets/image/symbol/eth.png" class="w-92 h-92" />
            <div class="text-grey font-26 mt-32">{{ $t('ETH充值') }}</div>
          </div>
        </div>
      </div>
      <div class="textColor mt-40">
        <div class="pl-36 pr-36 h-90 lh-90 border-b-color flex justify-between font-28" v-for="(item, index) in list"
          :key="index" @click="toPath(item.url)">
          <div class="flex items-center">
            <img :src="handleImage(item.imgPath)" class="w-44 h-44 rounded-full mr-20" />
            <span class="textColor1">{{ item.name }} {{ $t('官方充值通道') }}</span>
          </div>
          <div>
            <van-icon class="textColor1" name="arrow" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/Transform/assets-head/index.vue";
import { Icon } from 'vant';
export default {
  name: 'rechageList',
  components: {
    assetsHead,
    [Icon.name]: Icon,
  },
  data() {
    return {
      list: [
        {
          name: 'Huobi',
          url: 'https://www.huobi.com/en-us/',
          imgPath: new URL('@/assets/image/huobi.png', import.meta.url),
        },
        {
          name: 'Binance',
          url: 'https://www.binance.com/en',
          imgPath: new URL('@/assets/image/bian.png', import.meta.url),
        },
        {
          name: 'Coinbase',
          url: 'https://www.coinbase.com/',
          imgPath: new URL('@/assets/image/coinbase.png', import.meta.url),
        },
        {
          name: 'Crypto',
          url: 'https://www.crypto.com/',
          imgPath: new URL('@/assets/image/crypto.png', import.meta.url),
        }
      ],
      isForeign: false
    }
  },
  created() {
    if (this.$route.query.isForeign) {
      this.isForeign = this.$route.query.isForeign
    }
  },
  methods: {
    handleImage(url) {
      return new URL(url, import.meta.url).href
    },
    toPath(url) {
      const a = document.createElement('a');
      a.href = url;
      a.target = "_bank";
      document.body.append(a);
      a.click();
      document.body.removeChild(a)
      // if (navigator.userAgent.search('Html5Plus') != -1) {
      //     plus.runtime.openURL(url)
      // } else {
      //     window.open(url)
      // }
    },
    backFunc() {
      this.$router.push('/quotes/index?tabActive=1')
    },
    selectSymbol(symbol) {
      this.$router.push({
        path: "/cryptos/recharge/rechargePage",
        query: {
          'symbol': symbol
        }
      });
    },
    goRouter(params) {
      this.$router.push({
        path: params,
        query: {
          back: "1"
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos {
  .recharge {
    width: 100%;
    box-sizing: border-box;
  }

  .recharge-title {
    margin: 86px 0 104px 0;
  }

  .recharge-list>div {
    border: 2px solid $bg_dark;
    border-radius: 15px;
    box-sizing: border-box;
  }
}
</style>
